<template>
  <div>
    <van-field
      :label="label"
      :type="type"
      :placeholder="placeholder"
      :rule="rule"
      v-model="content"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ""
    };
  },
  props: ["label", "type", "placeholder", "rule"],
  methods: {
    handleRule() {
      const rue = new RegExp(this.rule);
      // test()方法用于检测一个字符串是否匹配某个模式，有匹配的值返回true，否则返回false
      if (rue.test(this.content)) {
        // console.log('满足条件');
        // $.emit() 触发当前实例上的事件。附加参数都会传给监听器回调
        this.$emit("inputChange", this.content);
      }
    }
  },
  // watch:值发生改变的时候监听
  watch: {
    content() {
      // console.log('watch监听到了值发生变化')；
      this.handleRule();
    }
  }
};
</script>

<style>
</style>